<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #image {
            width: 99px;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<img src="img.jpg" alt="" id="image"/>
</body>
</html>
<script>
    var image = document.getElementById("image");
    document.onclick = function (event) {
        var event = event || window.event;
        targetX = event.clientX - image.offsetWidth / 2;
        targetY = event.clientY - image.offsetHeight / 2;
    }
    // 缓动
    var leaderX = 0,
        leaderY = 0,
        targetX = 0,
        targetY = 0;
    setInterval(function () {
        leaderX = leaderX + (targetX - leaderX) / 10;
        leaderY = leaderY + (targetY - leaderY) / 10;
        image.style.left = leaderX + "px";
        image.style.top = leaderY + "px";
    }, 10)
</script>
